﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "添加装箱单";
    Layout = null;
}
@Html.AntiForgeryToken()
@using Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData["Title"]</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
    <link href="~/Views/WarehouseManagement/PackingView.custom.css" rel="stylesheet" />
</head>
<body>
    <div class="main-container">
        <div class="page-header">
            <h1 class="page-title">
                <i class="fas fa-box"></i>
                添加装箱单
            </h1>
        </div>
        <div class="content-card">
            <form class="layui-form packing-grid-form" id="createPackingForm" lay-filter="createPackingForm" autocomplete="off" style="padding: 30px 40px;">
                <div class="form-group">
                    <label class="form-label">装箱单编号</label>
                    <input type="text" name="PackingCode" id="packingCodeInput" placeholder="请输入装箱单编号" autocomplete="off" class="form-input" required lay-verify="required" lay-reqtext="装箱单编号不能为空">
                    <input type="checkbox" name="AutoCode" id="autoGeneratePackingCode" lay-skin="switch" lay-filter="autoGeneratePackingCode" lay-text="自动生成|手动输入" style="margin-top:8px;">
                </div>
                <div class="form-group">
                    <label class="form-label">装箱日期 <span style="color:red;">*</span></label>
                    <input type="text" name="PackingDate" id="PackingDate" placeholder="请选择装箱日期" autocomplete="off" class="form-input" readonly required lay-verify="required" lay-reqtext="装箱日期不能为空">
                </div>
                <div class="form-group">
                    <label class="form-label">销售订单编号</label>
                    <input type="text" name="SaleOrderCode" placeholder="请输入销售订单编号" autocomplete="off" class="form-input" required lay-verify="required" lay-reqtext="销售订单编号不能为空">
                </div>
                <div class="form-group">
                    <label class="form-label">客户编码</label>
                    <div style="display: flex; align-items: center;">
                        <input type="text" name="CustomerCode" id="customerCodeInput" placeholder="请输入客户编码" autocomplete="off" class="form-input" required lay-verify="required" lay-reqtext="客户编码不能为空" readonly>
                        <button type="button" class="btn btn-secondary" id="selectCustomerBtn" style="margin-left:6px;"><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">客户名称</label>
                    <input type="text" name="CustomerName" id="customerNameInput" placeholder="请输入客户名称" autocomplete="off" class="form-input" required lay-verify="required" lay-reqtext="客户名称不能为空" readonly>
                </div>
                <div class="form-group">
                    <label class="form-label">发票编号</label>
                    <input type="text" name="InvoiceCode" placeholder="请输入发票编号" autocomplete="off" class="form-input" required lay-verify="required" lay-reqtext="发票编号不能为空">
                </div>
                <div class="form-group">
                    <label class="form-label">箱长度</label>
                    <div class="input-unit-wrapper">
                        <input type="text" name="PackingLength" placeholder="请输入箱长度" autocomplete="off" class="form-input" required lay-verify="required|number" lay-reqtext="箱长度不能为空">
                        <span class="input-unit-suffix">cm</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">箱宽度</label>
                    <div class="input-unit-wrapper">
                        <input type="text" name="PackingWidth" placeholder="请输入箱宽度" autocomplete="off" class="form-input" required lay-verify="required|number" lay-reqtext="箱宽度不能为空">
                        <span class="input-unit-suffix">cm</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">箱高度</label>
                    <div class="input-unit-wrapper">
                        <input type="text" name="PackingHeight" placeholder="请输入箱高度" autocomplete="off" class="form-input" required lay-verify="required|number" lay-reqtext="箱高度不能为空">
                        <span class="input-unit-suffix">cm</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">净重</label>
                    <div class="input-unit-wrapper">
                        <input type="text" name="NetWeight" placeholder="请输入净重" autocomplete="off" class="form-input" required lay-verify="required|number" lay-reqtext="净重不能为空">
                        <span class="input-unit-suffix">kg</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">毛重</label>
                    <div class="input-unit-wrapper">
                        <input type="text" name="GrossWeight" placeholder="请输入毛重" autocomplete="off" class="form-input" required lay-verify="required|number" lay-reqtext="毛重不能为空">
                        <span class="input-unit-suffix">kg</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">检查员名称</label>
                    <input type="text" name="Inspector" placeholder="请输入检查员名称" autocomplete="off" class="form-input" required lay-verify="required" lay-reqtext="检查员名称不能为空">
                </div>
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label class="form-label">备注</label>
                    <textarea name="Remark" placeholder="请输入内容" class="form-input" style="min-height: 80px;"></textarea>
                </div>
                <div class="btn-group" style="margin-top: 32px; justify-content: flex-end; grid-column: 1 / -1;">
                    <button class="btn btn-primary" lay-submit lay-filter="savePacking"><i class="fas fa-save"></i> 保存</button>
                    <button type="button" class="btn btn-secondary" id="btnCancel"><i class="fas fa-times"></i> 取消</button>
                </div>
            </form>
        </div>
    </div>

    <script type="text/html" id="customerSelectDialog">
        <div style="padding:20px;">
            <form class="layui-form" id="customerSearchForm" style="margin-bottom:10px;">
                <input type="text" name="CustomerCode" placeholder="客户编码" class="layui-input" style="width:150px;display:inline-block;">
                <input type="text" name="CustomerName" placeholder="客户名称" class="layui-input" style="width:150px;display:inline-block;">
                <button class="layui-btn" lay-submit lay-filter="customerSearch">搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </form>
            <table class="layui-hide" id="customerTable" lay-filter="customerTable"></table>
            <div style="text-align:right;margin-top:10px;">
                <button class="layui-btn" id="customerSelectOk">确定</button>
                <button class="layui-btn layui-btn-primary" onclick="layer.closeAll();">取消</button>
            </div>
        </div>
    </script>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['form', 'laydate'], function(){
            var form = layui.form,
                laydate = layui.laydate,
                $ = layui.jquery;

            // 雪花ID生成函数
            function generateSnowflakeId() {
                var timestamp = Date.now();
                var random = Math.floor(Math.random() * 1000);
                return timestamp.toString() + random.toString().padStart(3, '0');
            }

            // 装箱日期选择
            laydate.render({
                elem: '#PackingDate',
                type: 'date',
                value: new Date()
            });

            // 自动生成编号开关默认关闭，编号可输入
            $('#autoGeneratePackingCode').prop('checked', false);
            $('#packingCodeInput').val('').prop('readonly', false);
            form.render('checkbox');

            // 监听自动生成开关
            form.on('switch(autoGeneratePackingCode)', function(data){
                if(data.elem.checked){
                    var id = generateSnowflakeId();
                    $('#packingCodeInput').val(id).prop('readonly', true);
                }else{
                    $('#packingCodeInput').val('').prop('readonly', false);
                }
            });

            // 取消按钮
            $('#btnCancel').on('click', function(){
                window.history.back();
            });

            // 表单提交
            form.on('submit(savePacking)', function(data){
                var postData = data.field;
                $.ajax({
                    url: '/WarehouseManagement/CreatePacking',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(postData),
                    headers: {
                        'RequestVerificationToken': $('input[name="__RequestVerificationToken"]').val()
                    },
                    success: function(res){
                        if(res.success){
                            layer.msg('保存成功', {icon: 1}, function(){
                                window.location.href = '/WarehouseManagement/PackingView';
                            });
                        }else{
                            layer.msg(res.message || '保存失败', {icon: 2});
                        }
                    },
                    error: function(){
                        layer.msg('请求失败，请重试', {icon: 2});
                    }
                });
                return false;
            });

            // 客户选择弹窗
            $('#selectCustomerBtn').on('click', function(){
                layer.open({
                    type: 1,
                    title: '客户选择',
                    area: ['900px', '500px'],
                    content: $('#customerSelectDialog').html(),
                    success: function(layero, index){
                        var tableIns = layui.table.render({
                            elem: '#customerTable',
                            url: '/Customer/ShowCustomer',
                            method: 'get',
                            page: true,
                            request: {
                                pageName: 'pageIndex',
                                limitName: 'pageSize'
                            },
                            cols: [[
                                {type:'radio', fixed: 'left', width: 50},
                                {field:'customerCode', title:'客户编码', width: 120},
                                {field:'customerName', title:'客户名称', width: 120},
                                {field:'customerShortName', title:'客户简称', width: 120},
                                {field:'customerType', title:'客户类型', width: 120},
                                {field:'customerPhone', title:'客户电话', width: 150},
                                {field:'contact', title:'联系人', width: 120},
                                {field:'contactPhone', title:'联系人电话', width: 120}
                            ]]
                        });
                        // 搜索
                        layui.form.on('submit(customerSearch)', function(data){
                            layui.table.reload('customerTable', {
                                where: data.field,
                                page: {curr: 1}
                            });
                            return false;
                        });
                        // 确定按钮
                        layero.find('#customerSelectOk').on('click', function(){
                            var checked = layui.table.checkStatus('customerTable').data[0];
                            if(!checked){
                                layer.msg('请选择客户');
                                return;
                            }
                            $('#customerCodeInput').val(checked.customerCode);
                            $('#customerNameInput').val(checked.customerName);
                            layer.closeAll();
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>
